<template>
   <div class="el-card box-card ">
    <div class="el-card_header">
      <div class="clearfix">
        <span>新增学员</span>
        <!-- 下拉 -->
        <el-select v-model="value" placeholder="近15天">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
        </el-select>
      </div>
    </div>
    <div class="el-card_body" ref="box"></div>
   </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted} from 'vue'
import echarts from "echarts";

let options=[{ 
          value: '选项1',
          label: '近一周'
        }, {
          value: '选项2',
          label: '近15天'
        }, {
          value: '选项3',
          label: '近30天'
        }, {
          value: '选项4',
          label: '自定义'
        }
] 
          
 let value=ref('')     

 let box=ref(null)
 let myechart
onMounted(()=>{ 
  myechart=echarts.init(box.value)
    renderChart()
});
const renderChart=()=>{ 
  const options={ 
      xAxis:{ 
        data:['03-15','03-16','03-17','03-18','03-19','03-20','03-21','03-22','03-23','03-24','03-25','03-26','03-27']
      },
      yAxis:{ 
        
      },
      barWidth:'10px',
      series:{ 
        name:'新增学员',
        data:['1','2','1','','','1','','2','2','','','1','2'],
        type:'bar',
      },
      itemStyle:{ 
        color:'#33CCFF'
      }
      
  }
  
  myechart.setOption(options)
}


</script>
<style scoped lang="scss">
.el-card{ 
  background-color: transparent;
  border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #fff;
    color: #303133;
    
    
    .el-card_header{ 
      height: 65px;
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .el-select{ 
      margin-left: 10px;
    }
    .el-card_body{ 
      height: 400px;
      width: 550px;
    }
}



</style>